<template>
	<view class="bankupload">
		<view class="list">
			<view class="list_item">
				<view class="list_title">商户UID</view>
				<input type="text" v-model="shopuid" placeholder="请填写商户UID" />
			</view>
			<view class="list_item">
				<view class="list_title">门店名称</view>
				<input type="text" :value="shop.shopName" disabled="true" />
				<image src="../../static/img/my_back.png"
				 @click="openShop()" v-if="shop.shopinfoArr.length>1"></image>
			</view>
			<view class="list_item">
				<view class="list_title">门店ID</view>
				<input type="text" :value="shop.shopid" disabled="true" />
			</view>
		</view>
		<view class="photo" v-if="type == 0">
			<view class="photo_item" @click="open(index)" v-for="(item,index) in photoObj0" :key="index">
				<image :src="item.url==''?'../../static/img/uploadPhoto.png':item.url"></image>
				<view v-html="item.text"></view>
			</view>
		</view>
		<view class="photo" v-if="type == 1">
			<view class="photo_item" @click="open(index)" v-for="(item,index) in photoObj1" :key="index">
				<image :src="item.url==''?'../../static/img/uploadPhoto.png':item.url"></image>
				<view v-html="item.text"></view>
			</view>
		</view>
		<view class="btn">
			<button type="primary" @click="ysfimgaddFun()">提交</button>
		</view>
		<!-- 照片弹窗 -->
		<uni-popup ref="popup" type="bottom">
			<view class="myinfo_popup">
				<view @click="selectImg(0)">拍照</view>
				<view @click="selectImg(1)">从相册中选择</view>
				<view class="myinfo_close" @click="close()">取消</view>
			</view>
		</uni-popup>
		<!-- 门店名称弹窗 -->
		<uni-popup ref="popupShop" type="center">
			<view class="zlpopup">
				<view class="zlpopup_item" v-for="(item,index) in shop.shopinfoArr" @click="selectShop(index)">
					{{item.shop_name}}
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	// ysfimgadd
	import { uploadimg,shopinfo,ysfimgadd,ysfadd } from '../../api/index.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	export default {
		data() {
			return {
				shopuid:'',
				photoIndex:0,
				photoObj0:[
					{
						url:'',
						text:'<text class="redfont">*</text>门头照(带商户店名)'
					},
					{
						url:'',
						text:'<text class="redfont">*</text>收银台照(带银联云闪付logo)'
					},
					{
						url:'',
						text:'<text class="redfont">*</text>店内环境照'
					},
					{
						url:'',
						text:'硬件设备照(带银联云闪付logo)'
					}
				],
				photoObj1:[
					{
						url:'',
						text:'<text class="redfont">*</text>物料'
					}
				],
				type:0,
				shop:{
					shopuid:"",
					shopName:"",
					shopid:"",
					timeout:null,
					shopinfoArr:""
				}
			}
		},
		onLoad:function(data){
			this.type = data.type;
			if(data.type == 1){ //type 0为银联云闪付 1为云闪付物料
				
			}else{
				
			}
		},
		methods: {
			open:function(index){
				this.photoIndex = index;
			    this.$refs.popup.open()
			},
			close:function(){
			    this.$refs.popup.close()
			},
			openShop:function(index){
				this.photoIndex = index;
			    this.$refs.popupShop.open()
			},
			closeShop:function(){
			    this.$refs.popupShop.close()
			},
			//防抖
			debounce:function(){
				let that = this;
				if(that.shop.timeout !== null){
					clearTimeout(that.shop.timeout)
				};
				that.shop.timeout = setTimeout(function(){
					that.getShopinfo()
				}, 1000);
			},
			getShopinfo:function(){
				let that = this;
				shopinfo({
					uid:that.shopuid
				}).then((res) => {
					console.log(res)
					if(res.code == 0){
						that.shop.shopinfoArr = res.data;
						that.shop.shopName = res.data[0].shop_name;
						that.shop.shopid = res.data[0].id;
					}
				}).catch((e) => {
					console.log(e);
				})
			},
			selectImg:function(type){
				let that = this;
				let sourceType = [];
				if(type==0){
					sourceType = 'camera';
				}else{
					sourceType = 'album';
				}
				cm.chooseImage({
					count:1,
					sourceType:sourceType,
					success:function(res){
						let base64Obj = JSON.parse(res);
						let baseStr = '';
						if(type == 0){
							baseStr = base64Obj.base64String;
						}else{
							baseStr = base64Obj.base64StringArray[0];
						}
						that.updateImgfun(baseStr);
					},
					fail:function(){
						alert("获取图片失败");
					}
				});
			},
			selectShop:function(index){
				this.shop.shopName = this.shop.shopinfoArr[index].shop_name;
				this.shop.shopid = this.shop.shopinfoArr[index].id;
				this.$refs.popupShop.close();
			},
			//修改图片逻辑
			async updateImgfun(base64){
				let that = this;
				let uploadimgData = await uploadimg({img:base64});
				if(uploadimgData.code == 0){
					if(that.type == 0){
						that.photoObj0[that.photoIndex].url = uploadimgData.data.url
					}else{
						that.photoObj1[that.photoIndex].url = uploadimgData.data.url
					}
					
					that.close()
				}else{
					alert(uploadimgData.res)
				}
			},
			//提交逻辑
			ysfimgaddFun:function(){
				let that = this;
				let shopid = that.shop.shopid;
				if(that.type == 0){
					let img_shop = that.photoObj0[0].url;
					let img_checkstand = that.photoObj0[1].url;
					let img_environment = that.photoObj0[2].url;
					let img_device = that.photoObj0[3].url;
					let errorText = '';
					if(!shopid){
						errorText = '请填写有效的商户uid'
					}else if(!img_shop){
						errorText = '请上传门头照'
					}else if(!img_checkstand){
						errorText = '请上传收银台照'
					}else if(!img_environment){
						errorText = '请上传店内环境照'
					}else if(!img_device){
						errorText = '请上传硬件设备照'
					}
					
					if(errorText){
						uni.showToast({
							title:errorText,
							icon:'none'
						})
						return ;
					}
					ysfadd({
						id: shopid,//门店id
						img_shop: img_shop,//门头照
						img_checkstand: that.photoObj0[1].url,//收银台照
						img_environment: that.photoObj0[2].url,//店内环境照
						img_device: that.photoObj0[3].url//硬件设备照
					}).then((res) => {
						console.log(res)
						alert(res.msg)
						if(res.code == 0){
							uni.navigateTo({
								url:"../bankpay/bankpay"
							})
						}
					}).catch((e) => {
						console.log(e);
					})
				}else if(that.type == 1){
					let img_materials = that.photoObj1[0].url;
					let errorText = '';
					if(!shopid){
						errorText = '请填写有效的商户uid'
					}else if(!img_materials){
						errorText = '请上传物料图片'
					}
					if(errorText){
						uni.showToast({
							title:errorText,
							icon:'none'
						})
						return ;
					}
					
					ysfimgadd({
						id: that.shop.shopid,//门店id
						img_materials: that.photoObj1[0].url//物料图片
					}).then((res) => {
						console.log(res)
						alert(res.msg)
						if(res.code == 0){
							uni.navigateTo({
								url:"../paydata/paydata"
							})
						}
					}).catch((e) => {
						console.log(e);
					})
				}
			}
		},
		components: {
		    uniPopup
		},
		watch:{
			shopuid:function(){
				this.debounce()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bankupload{
		font-size: $uni-font-size-base;
		padding: 0 30rpx;
		.list{
			margin-bottom: 30rpx;
			.list_item{
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid $uni-border-color-e5;
				height: 100rpx;
				.list_title{
					width: 30%;
					color: #666666;
				}
				input{
					width: 70%;
					font-size: $uni-font-size-base;
				}
				image{
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
		.photo{
			display: flex;
			flex-wrap: wrap;
			.photo_item{
				width: 50%;
				text-align: center;
				color: #666666;
				image{
					width: 340rpx;
					height: 240rpx;
				}
				view{
					
				}
			}
		}
		.btn{
			margin-top: 30rpx;
			button{
				font-size: $uni-font-size-lg;
			}
		}
		.myinfo_popup{
			background-color: #F5F5F5;
			font-size: $uni-font-size-base;
			text-align: center;
			view{
				background-color: #FFFFFF;
				border-bottom: 1rpx $uni-solid-color solid;
				padding: 30rpx;
			}
			.myinfo_close{
				margin-top: 30rpx;
			}
		}
		.zlpopup{
			background-color: #FFFFFF;
			margin: 0 auto;
			border-radius: $uni-border-radius-lg;
			font-size: $uni-font-size-base;
			.zlpopup_item{
				padding: 30rpx;
			}
		}
	}
</style>
